/*
 * @Description: 医院科室页面
 * @Author: 谢涛
 * @LastEditors: Please set LastEditors
 * @Date: 2019-04-22 19:13:58
 * @LastEditTime: 2020-02-25 14:31:56
 */

import React, { Component } from 'react'
import { DeleteOutlined, FileAddOutlined, FormOutlined, SearchOutlined } from '@ant-design/icons';
import '@ant-design/compatible/assets/index.css';
import { Form, Col, Row, Input, Button, Popconfirm, Select, message, } from 'antd';
import MyTable from '../../components/MyTable'
import BtnPermission from '../../components/BtnPermission'
import { departmentsApi, institutionsApi,ygxxApi } from '@/services/basic'
import EditItem from './EditItem'
import '../../layouts/queryList.css'

const InputGroup = Input.Group;
const Option = Select.Option;

class HospitalDep extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],//data就是最顶层的数据 它包含records records是每条列表数据的集合 data还包含了其他信息 譬如总页数 当前页等等
            records: [],
            institution: [],
            ygxx:[],
            handlers: {
                create: 'create',
                view: 'view',
                update: 'update',
            },//定义操作类型 
        }
    }

    //组件挂载后为列表请求数据
    componentDidMount = () => {
        this.queryData();
    }

    //页码变化的时候，请求数据
    onChange = (pagination) => {
        this.queryData(pagination);
    }

    //增、改一条数据后刷新列表
    editItemDone = () => {
        this.queryData();
    }

    //增查改、设置操作类型，并传入对应行数据
    setHandler = (handler, record) => {
        this.EditItemRef.showModal(handler, record);
    }


    //删除一条数据后刷新列表
    deleteItem = (ksid) => {
        departmentsApi.delete(ksid)
            .then(res => {
                if (res.code === '1') {
                    message.success(res.msg)
                    this.queryData()
                }
                message.warning(res.msg)
            })
    }

    //查找框查找数据
    queryData = (pagination = undefined) => {
        let formData = this.form.getFieldsValue();
        departmentsApi.getPage({ formData: { ...formData, zt: '1' }, pagination, })
            .then(res => {
                this.setState({ data: res, records: res.records })
            })
    }

    onInstitutionSearch = (value, option) => {
        if (value.charCodeAt(value.length - 1) === 32) {
            value = value.trim();
            institutionsApi.search({ search: `${value}` })
                .then((res) => {
                    let institution = res.records.map(item => <Option key={item.yymc} value={item.yybm}>{item.yymc}</Option>);
                    this.setState({
                        institution: institution,
                    })
                })
        }
    }

      //人员输入时触发
           onygxxSearch = (value) => {
            if (value.charCodeAt(value.length - 1) === 32) {
              value = value.trim();
              ygxxApi.search({ search: `${value}` }).then((res) => {
                let ygxx = res.records.map((item) => (
                  <Option key={item.gh} value={item.gh}>
                    {item.xm}
                  </Option>
                ));
                this.setState({
                  ygxx: ygxx,
                });
              });
            }
          };

    onInstitutionFocus = (value, option) => {
        institutionsApi.search({})
            .then((res) => {
                let institution = res.records.map(item => <Option key={item.yymc} value={item.yybm}>{item.yymc}</Option>);
                this.setState({
                    institution: institution,
                })
            })
    }

    render() {
        const { create, update } = this.state.handlers

        const columns = [
            { title: '公司名称', dataIndex: 'yymc' },
            {
                title: '部门名称', dataIndex: 'ksmc',
                render: (text, record) => {
                    return record.ksmc
                }
            },
            // {
            //     title: '部门名称', dataIndex: 'ksbm',
            //     render: (text, record) => {
            //         return record.ksbm
            //     }
            // },
            {
                title: '部门负责人', dataIndex: 'ygxm',
                render: (text, record) => {
                    return record.ygxm
                }
            },
            {
                title: '联系电话', dataIndex: 'ksch',
                render: (text, record) => {
                    return record.ksch
                }
            },
            // {
            //     title: '群聊地址', dataIndex: 'ksfh',
            //     render: (text, record) => {
            //         return record.ksfh
            //     }
            // },
            {
                title: '操作',
                key: 'action',
                // width: 360,
                render: (text, record) =>
                    (
                        <span className='handleButton'>
                            {
                                this.props.permission.edit ?
                                    <FormOutlined onClick={() => this.setHandler(update, record)} className='update-button' />
                                : ''
                            }
                            {
                                this.props.permission.delete ?
                                    <Popconfirm title="确认删除?" onConfirm={() => this.deleteItem(record.ksid)}>
                                        <DeleteOutlined className='delete-button' />
                                    </Popconfirm>
                                : ''
                            }
                        </span>
                    ),
            },
        ];


        let { data, records } = this.state
        //给表格项加key 唯一标识 不然报警告
        let dataSource = records.slice(0);
        dataSource = dataSource.map((item, index) => {
            return Object.assign(item, { id: index })
        })

        return (
            <div className="queryList">
                <Form autoComplete="off" ref={form => this.form = form} layout="inline" >
                    <InputGroup className='input-group'>
                        <Row gutter={24}>
                            <Col span={6}>
                                <Form.Item label='公司名称'
                                    name="yybm"
                                >
                                    <Select allowClear placeholder="输入关键字按空格查找" filterOption={false} showSearch={true}
                                        onSearch={this.onInstitutionSearch}
                                        onFocus={this.onInstitutionFocus}
                                    >
                                        {this.state.institution}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label='部门名称'
                                    name="ksmc"
                                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                                >
                                    <Input allowClear placeholder='请输入' />
                                </Form.Item>
                            </Col>
                            <Col span={2}>
                                <Button onClick={this.queryData} icon={<SearchOutlined />} className='search-button'>查询</Button>
                            </Col>
                            {
                                this.props.permission.add ?
                                    <Col span={2}>
                                        <Button icon={<FileAddOutlined />} className='addButton' onClick={() => this.setHandler(create)}>新增</Button>
                                    </Col>
                                : ''
                            }
                        </Row>
                    </InputGroup>
                </Form>
                <EditItem ref={(EditItemRef) => this.EditItemRef = EditItemRef} editItemDone={this.editItemDone}
                    bookRender={this.props.bookRender}
                />
                <MyTable props={{ columns, dataSource, data, setHandler: this.setHandler, onChange: this.onChange, permission: this.props.permission }} />

            </div>
        );
    }
}
export default BtnPermission(HospitalDep, {
    dataBook: {
        22: 'kslx', // 科室类型
        74: 'ggks', // 公共科室
    }
})